<template>
  <div>
    <div class="title flex items-center justify-between">
      <div class="flex  items-center">
        <div class="text-[20px]">
          待办事项
        </div>

      </div>


    </div>

    <div class="module mt-[20px] ">
<!--      <div class="flex items-center">-->
<!--        <div class="flex items-center">-->
<!--          <div class="bg w-[24px] h-[24px] mr-[10px]" style="background-image: url(https://img.alicdn.com/imgextra/i3/801089336/O1CN017H8ITs2Ipwkkuh09r_!!801089336.png)"></div>-->
<!--          超时签收提醒-->
<!--        </div>-->


<!--      </div>-->

<!--      <div class="mt-[15px] flex items-center justify-between">-->
<!--        <div>-&#45;&#45;</div>-->
<!--        <div class="text-[#3721FF]">-->
<!--          去处理 >-->
<!--        </div>-->
<!--      </div>-->

      <div class="flex justify-between mt-[15px]">

        <div v-for="(item,index) in tabs" :key="index" class="w-[235px] h-[80px] bg-[#FAFAFA] rounded-[8px] px-[16px] py-[16px] relative">
          <div class="flex items-center">
            <div class="w-[4px] h-[8px] rounded-[4px] mr-[5px]"
                 :style="`background:${ item.color }`"
            ></div>
            <div class="text-[#524E74]">
              {{ item.name }}
            </div>
          </div>

          <div class="mt-[10px] text-[#101010] text-[20px] font-bold">
            {{  datas[item.code] || 0  }}
          </div>


          <div class="absolute bottom-[10px] right-[10px] text-[#3721FF] cursor-pointer" @click="handleBtnClick({type:'jump',item})">
              去处理>
          </div>

        </div>

      </div>

    </div>

  </div>
</template>
<script setup lang="ts">

import {getToDo} from "@/api/home";
import router from "@/router";

const tabs = ref([
  {
    name:"订单审核（单）",
    color:"#3721FF",
    code:"approval",
    router:"/trade/order/unaudit?status=1"
  },
  // {
  //   name:"转寄（单）",
  //   color:"#FF4168"
  // },
  {
    name:"待确认（单）",
    color:"#0088FF",
    code:"confirm",
    router:"/trade/order/unaudit?status=2"
  }
])

const datas=ref({})

const queryData=async()=>{
  let res = await getToDo();
  console.log(res)
  datas.value=res
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  jump({item}){
    router.push(item.router)
  }
}

onMounted(() => {
  queryData();
})

</script>
<style lang="scss" scoped>
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}

.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }

    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

    &:nth-last-of-type(1) {
      border-left: solid 0px #E4E4E4;
      border-radius: 0 8px 8px 0;
    }
  }

}
</style>
